<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <!-- import css -->
    
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="reset.min.css">
</head>
<body>
      <!-- 头部 -->
    <header class="headr">
            <!-- 顶部 -->
            <div class="top">
                <a href="https://lol.qq.com/main.shtml"><img src="./img/logo.png" alt="" class="logo"></a>
                <ul class="top-ul">
                    <li><span>游戏资料</span><p>GAME&nbsp;INFO</p></li>
                    <li><span>商城/合作</span><p>STORE</li>
                    <li><span>社区互动</span><p>COMMUNITY</li>
                    <li><span>赛事官网</span><p>ESPORTS</li>
                    <li><span>自助系统</span><p>SYSTEM</li>
                </ul>
                             <!-- 按钮 -->
                 
              <a href="" class="head-search"><i></i></a>
              <a href="" class="head-weixin">
                <i></i>
                <div >
                    <img src="./img/zm-qrcode.jpg" alt="" class="wx-img">
                    <p>
                        扫码下载掌上英雄联盟
                        <img src="./img/polo.gif" alt="">
                    </p>
                 </div>
              </a>
            
             <!-- 个人中心 -->
             <div class="head-person">
                <span class="baes-logo">
                    <img src="./img/default.png" alt="">
                    
                </span>
                <p>亲爱的召唤师，欢迎登陆</p>
             <div class="porson-detail">
                <div>
                    <p></p>
                    <p></p>
                </div>
                <a href="" class="detail-more"><i class="comm-more"></i></a>
             </div>
            </div>
            </div>

           <!-- 背景遮罩 -->
           <div  class = 'major' ></div>
           <!-- 背景按钮 -->
           <div class="bg-but"><div><a href="">查看样式</a></div></div>
           <!-- 作者版本 -->
           <div class="author-box">
            <span>当前游戏版本</span>
            <span>Ver 12.21</span>
            <a href="">版本详情</a>
           </div>
           <!-- 导航 -->
           <div class="nav-detail">
             <ul>
                <li>
                    <a href="">游戏下载</a>
                    <a href="">新手指导</a>
                    <a href="">资源库</a>
                    <a href="">
                        <i class="icon-new"></i>
                        云顶之弈
                    </a>
                    <a href="">
                        <i class="icon-new"></i>
                        攻略中心
                    </a>
                    <a href="">开发者基地</a>
                    <a href="">海克斯战力库</a>
                    <a href="">英雄联盟宇宙</a>
                </li>
                <li>
                    <a href="">点券充值</a>
                    <a href="">
                        <i class="icon-hot"></i>
                        道聚城
                    </a>
                    <a href="">周边商城</a>
                    <a href="">LOL桌游</a>
                    <a href="">网吧特权</a>
                    <a href="">电竞小说</a>
                </li>
                <li>
                    <a href="">视频中心</a>
                    <a href="">官方微信</a>
                    <a href="">玩家创作馆</a>
                    <a href="">玩家服务</a>
                    <a href=""><i class="icon-new"></i>LOL组队专区</a>
                    <a href=""><i class="icon-new"></i>作者入驻计划</a>
                <a href=""><i class="icon-new"></i>英雄联盟素材库</a>
                </li>
                <li>
                    <a href=""><i class="icon-hot"></i>全球总决赛</a>
                    <a href="">季中冠军赛</a>
                    <a href="">LPL职业联赛</a>
                    <a href="">LDL发展联赛</a>
                    <a href="">城市英雄争霸赛</a>
                    <a href="">德玛西亚杯</a>
                    <a href="">全国高校联赛</a>
                    <a href=""><i class="iocn-new"></i>云顶之弈公开赛</a>
                </li>
                <li>
                    <a href=""><i class="icon-hot"></i>图标自助领取</a>
                    <a href=""><i class="icon-new"></i>转区服务</a>
                    <a href=""><i class="icon-hot"></i>封号查询</a>
                    <a href="">账号注销</a>
                    <a href=""><i class="icon-new"></i>信誉分查询</a>
                    <a href="">服务器状态查询</a>
                    <a href="">秩序殿堂</a>
                    <a href="">峡谷之巅</a>
                </li>
             </ul>
           </div>
        </div>
        
    </header>
    <!-- 主体 -->
    <div class="bg-main">
    <div class="main">
        <!-- 轮播图 -->
        <div class="swipr">
        <div class="swipr-img">
            <ul>
                <li><img src="./img/轮播/轮播1.jpg" alt=""></li>
                <li><img src="./img/轮播/轮播2.jpeg" alt=""></li>
                <li><img src="./img/轮播/轮播3.jpeg" alt=""></li>
                <li><img src="./img/轮播/轮播4.jpeg" alt=""></li>
                <li><img src="./img/轮播/轮播5.jpeg" alt=""></li>
                <li><img src="./img/轮播/轮播1.jpg" alt=""></li>
            </ul>
        </div>
        <ul class="swipr-index">
            <li class="active"><span>S12限定款&nbsp;提伯斯</span></li>
            <li><span>穿星掠梦魔典</span></li>
            <li><span>《双城之战：天堑》</span></li>
            <li><span>你的商店</span></li>
            <li><span>TOC4全球总冠军</span></li>
        </ul>
        </div>
        <!-- 公告栏 -->
        <div class="tab-title">
            <div class="tab-headr"></div>
            <ul>
                <li>综合</li>
                <li>公告</li>
                <li>赛事</li>
                <li>攻略</li>
                <li>社区</li>
            </ul>
            <p>太空律动2022皮肤即将上线</p>
            <ul class="tab-body">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <a href="">
                <span>阅读更多</span>
                <span>最新咨询</span>
            </a>
        </div>
    </div>

    </div>
           <!-- import js -->
     
     <script src="./js/haed.js"></script>
     <script src="./js/封装动画函数.js"></script>
     <script src="./js/swipr.js"></script>
   
</body>
</html>